import React, { useMemo } from 'react';
import { Card, Radio, Spin } from 'antd';
import { Line } from '@ant-design/charts';
import type { RadioChangeEvent } from 'antd';

interface TrendData {
  date: string;
  value: number;
  type: string;
}

interface TrendChartProps {
  userTrend: Record<string, number>;
  articleTrend: Record<string, number>;
  viewTrend: Record<string, number>;
  commentTrend: Record<string, number>;
  loading?: boolean;
}

const TrendChart: React.FC<TrendChartProps> = ({
  userTrend,
  articleTrend,
  viewTrend,
  commentTrend,
  loading,
}) => {
  const [selectedTrends, setSelectedTrends] = React.useState<string[]>(['user']);

  const chartData = useMemo(() => {
    const data: TrendData[] = [];
    
    if (selectedTrends.includes('user')) {
      Object.entries(userTrend).forEach(([date, value]) => {
        data.push({ date, value, type: '用户增长' });
      });
    }
    
    if (selectedTrends.includes('article')) {
      Object.entries(articleTrend).forEach(([date, value]) => {
        data.push({ date, value, type: '文章发布' });
      });
    }
    
    if (selectedTrends.includes('view')) {
      Object.entries(viewTrend).forEach(([date, value]) => {
        data.push({ date, value, type: '访问量' });
      });
    }
    
    if (selectedTrends.includes('comment')) {
      Object.entries(commentTrend).forEach(([date, value]) => {
        data.push({ date, value, type: '评论数' });
      });
    }
    
    return data;
  }, [userTrend, articleTrend, viewTrend, commentTrend, selectedTrends]);

  const handleTrendChange = (e: RadioChangeEvent) => {
    const value = e.target.value as string[];
    setSelectedTrends(value);
  };

  return (
    <Card
      title="数据趋势"
      extra={
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Radio.Group
            value={selectedTrends}
            onChange={handleTrendChange}
            optionType="button"
            buttonStyle="solid"
          >
            <Radio.Button value={['user']}>用户</Radio.Button>
            <Radio.Button value={['article']}>文章</Radio.Button>
            <Radio.Button value={['view']}>访问</Radio.Button>
            <Radio.Button value={['comment']}>评论</Radio.Button>
            <Radio.Button value={['user', 'article', 'view', 'comment']}>
              全部
            </Radio.Button>
          </Radio.Group>
          <Spin spinning={loading} size="small" />
        </div>
      }
    >
      <Line
        data={chartData}
        xField="date"
        yField="value"
        seriesField="type"
        point={{
          size: 4,
          shape: 'circle',
        }}
        tooltip={{
          showMarkers: false,
        }}
        interactions={[
          {
            type: 'element-active',
          },
        ]}
        legend={{
          position: 'top',
        }}
        smooth
        animation={{
          appear: {
            animation: 'wave-in',
            duration: 1000,
          },
        }}
      />
    </Card>
  );
};

export default TrendChart; 